<template>
  <div class="cp-danger" :class="{active: showdata.active, enter, mid, leave}">
    <div class="index">{{index + 1}}</div>
    <div class="av-wrapper">
      <img src="./img/main-block-4-av-av.png" class="av-av">
      <div class="av-border"></div>
    </div>
    <div class="name">{{showdata.name}}</div>
    <div class="country">{{showdata.country}}</div>
  </div>
</template>

<script>
import Vue from 'vue'
import {sleep} from 'utils/timer'

export default {
  name: 'danger',
  props: ['data', 'index'],
  data(){
    return {
      showdata: this.data,
      enter: false,
      leave: false,
      mid: false
    }
  },
  watch: {
    data: async function(newVal, oldVal){
      this.enter = true
      await sleep(600)
      this.showdata = newVal
      this.enter = false
      this.mid = true
      this.leave = true
      await sleep(30)
      this.mid = false
      this.leave = false
    }
  }
}
</script>

<style>
.cp-danger{
  width: 11.48vh;
  height: 16.48vh;
  box-sizing: border-box;
  border: 1px solid #2b98cf;
  background: linear-gradient(to top, rgba(6, 74, 129, .7), rgba(35, 148, 236, .7));
  border-radius: 0.46vh;
  color: #b8fdff;
  transition: all .6s ease;
}
.cp-danger.active{
  background: linear-gradient(to bottom, rgba(227, 45, 3, .7), rgba(227, 45, 3, 0));
  border-color: rgba(217, 44, 6, .7);
  color: #d98976;
}
.cp-danger.active .av-border{
  background: #e32d03;
}
.cp-danger.active .name, .cp-danger.active .country{
  color: #e32d03;
}
.index, .name, .country{
  text-align: center;
}
.index{
  font-size: 2.88vh;
  font-style: italic;
  line-height: 3.33vh;
}
.name, .country{
  font-size: 1.12vh;
  line-height: 1.8vh;
}
.av-wrapper{
  position: relative;
  width: 8.06vh;
  height: 8.06vh;
  margin: 0 auto 0.4vh auto;
}
.av-av{
  position: absolute;
  left: 0.14vh;
  top: 0.14vh;
  width: 7.78vh;
  height: 7.78vh;
}
.av-border{
  width: 8.06vh;
  height: 8.06vh;
  mask-image: url(./img/main-block-4-av-border.png);
  mask-size: 100% 100%;
  background: #122e4e;
}
.cp-danger.enter{
  transform: perspective(100vh) rotateY(90deg);
}
.cp-danger.mid{
  transition: none;
}
.cp-danger.leave{
  transform: perspective(100vh) rotateY(-90deg);
}
</style>
